<template>
    <div class="header-wrapper">
        <el-icon @click="handleUpdateMenu(!showMenu)" class="func-icon">
            <Expand v-if="showMenu"/>
            <Fold v-else />
        </el-icon>

        <el-breadcrumb class="breadcrumb-wrapper">
            <el-breadcrumb-item>{{ breadcrumbItem.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="user-info-box">
            <el-icon @click="handleFullScreen" class="func-icon" style="padding-right: 12px;"><Full-screen class="icon" /></el-icon>
            <span>{{ baseInfoStore.userInfo.nickName }}</span>

            <el-dropdown>
                <el-icon style="cursor: pointer; font-size: 16px;"><caret-bottom /></el-icon>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="handleCheckPerson">个人信息</el-dropdown-item>
                        <el-dropdown-item @click="handleLoginOut">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

        </div>
    </div>
</template>

<script setup lang='ts'>
// 导入element-plus icon
import { Fold , CaretBottom,Expand,FullScreen} from '@element-plus/icons-vue'
import { computed,ComputedRef} from 'vue';
import useStore from '@/store/menu'
import useBaseInfoStore from '@/store/baseInfo'
import {useRoute} from 'vue-router'
import useCurrentInstance from '@/hooks/useCurrentInstance'

const {proxy:vm} = useCurrentInstance();
// 全屏
const handleFullScreen = () => {
    if(!document.fullscreenElement){
        document.documentElement.requestFullscreen();
    }else{
        document.exitFullscreen();
    }
}

// 退出登录
const handleLoginOut = () => {
    // 清除token
    localStorage.removeItem('token');

    vm?.$router.push({
        path: '/login'
    })
}

const handleCheckPerson = () => {
    vm.$router.push('/person')
}

/**
 * showMenu
 * 隐藏 / 显示左侧菜单
 * false 隐藏 true 显示
 */

const store = useStore();
const showMenu:ComputedRef<Boolean> = computed(() => store.showMenu);
// 显示/隐藏 菜单
const handleUpdateMenu = (isShow: Boolean) => {
    store.$patch({
        showMenu: isShow
    })
};

// 面包屑
const route = useRoute();
const breadcrumbItem = computed(() => {
    return route;
})

// 用户信息 sessionStorage
const baseInfoStore = useBaseInfoStore();

</script>


<style lang="scss" scoped>
.header-wrapper {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e4e4e4;
    background-color: #fff;
}

.user-info-box {
    display: flex;
    align-items: center;
}

.func-icon {
    font-size: 20px;
    cursor: pointer;
}

.breadcrumb-wrapper {
    flex: 1;
    padding-left: 24px;
}

:deep(.el-breadcrumb__inner a),
:deep(.el-breadcrumb__inner.is-link) {
    font-weight: 400;
}

</style>